﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>详情-复杂</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/tail.css">
    <link href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css" rel="stylesheet">

    <style>
        .mes_container {
            color: white;
        }

        .left_field {
            float: left;
        }

        .right_field {
            float: left;
        }

        .mes_container label {
            font-size: 13px;
            font-weight: 600;
            /*600*/
            width: 13%;
            display: inline-block;
            text-align: center;
            /*原来是right*/

            color: #eeeeee;
        }

        .mes_container .mes_row {
            margin: 10px;
        }

        .mes_container p {
            padding-left: 15%;
            font-size: 13px;
            padding-top: 10px;
            padding-bottom: 10px;
            color: #b98129;
        }

        .mes_container .message_input {
            width: 70%;
            height: 30px;
            border: 1px solid #4b8df8;
            border-radius: 5px;
            outline: none;
        }

        .mes_container .message_select {
            width: 20%;
            height: 32px;
            border: 1px solid #4b8df8;
            border-radius: 5px;
            outline: none;
        }

        .mes_container .message_file {
            display: none;
        }

        .mes_container .mes_file_name {
            color: white;
        }

        .mes_container .mes_file_label {
            width: 30%;
            height: 30px;
            line-height: 30px;
            border: 1px solid #4b8df8;
            border-radius: 5px;
            border-top-left-radius: 5px;
            outline: none;
            vertical-align: middle;
        }

        .mes_field {
            width: 700px;
            margin: 10px;
            border-radius: 5px;
            border: 1px solid #cccccc
        }

        .mes_field legend {
            color: #c6e5f6b8;
            font-size: 14px;
        }

        .must {
            color: red;
            margin-left: 5px;
            position: relative;
            display: inline-block;
            top: 3px;
        }


        .mes_submit {
            width: 9%;
            height: 31px;
            border: none;
            background-color: #4b8df8;
            color: #FFFFff;
            cursor: pointer;
        }

        .mes_show {
            height: 300px;
            display: flex;
            font-size: 32px;
            justify-content: center;
        }

        .mes_show .content {
            margin: auto;
        }

        .file_table {
            width: 90%;
            margin-left: 40px;
        }

        .file_table td {
            height: 35px;
            text-align: center;
        }

        .file_table tr,
        td,
        caption {
            border-bottom: 1px solid white;
            border-right: 1px solid white;
        }

        .fixed-table-border {
            display: none;
        }

        .file_upload {
            margin: 32px 40px;
        }

        .file_upload label {
            width: 200px;
        }

        .warn_info {
            color: red;
        }

        a {
            color: rgb(95, 65, 215);
            text-decoration: double;
        }

        .video,
        .image {
            height: 300px;
            width: 90%;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body class="body1">
    <!--顶部-->
    <header class="header left">
        <div class="left nav">
            <ul>
                <li><i class="nav_1"></i><a href="index.html">使用情况概览</a> </li>
                <li><i class="nav_2"></i><a href="carContrl.html">视频监控</a> </li>
                <li><i class="nav_3"></i><a href="map.html">报警管理</a> </li>



            </ul>
        </div>
        <div class="header_center left">
            <h2><strong>智慧灯杆管理平台</strong></h2>
            <p class="color_font"><small>Comprehensive service platform for smart tourism</small></p>
        </div>
        <div class="right nav text_right">
            <ul>
                <li><i class="nav_7"></i><a href="static.html">环境监测</a> </li>
                <li class="nav_active"><i class="nav_8"></i><a href="message.html">广告投放</a> </li>
                <li><i class="nav_4"></i><a href="table2.html">灯杆管理</a> </li>
            </ul>
        </div>

    </header>
    <div class="mes_container">
        <div class="left_field">
            <fieldset class="mes_field">
                <legend>文件上传</legend>
                <div class="mes_row">
                    <label>广告标题：</label>
                    <input type="text" class="message_input"><span class="must">*</span>
                    <p>广告标题可以输入任一字符,但长度不能小于1大有大于200!</p>
                </div>
                <div class="mes_row">
                    <label>广告类型：</label>
                    <select class="message_select">
                        <option value="0">图片</option>
                        <option value="1">视频</option>
                    </select><span class="must">*</span>
                </div>
                <div class="mes_row">
                    <label>附件上传：</label>
                    <input id="message_file" type="file" class="message_file">
                    <label class="mes_file_label" for="message_file">选择文件</label>
                    <span class="must">*</span>
                    <span class="mes_file_name"></span>
                </div>
                <div class="mes_row mes_btn_con">
                    <label>点击上传：</label>
                    <button class="mes_submit file_up">上传</button>
                </div>
            </fieldset>
            <fieldset class="mes_field">
                <legend>大屏展示</legend>
                <div class="mes_show">
                    <img class="image none" src="" alt="">
                    <video class="video none" src="" autoplay controls loop></video>
                </div>
            </fieldset>
        </div>
        <div class="right_field">
            <fieldset class="mes_field">
                <legend>文件信息</legend>
                <div class="file_table">
                    <table id="file_table" data-checkbox-header="false" data-height="400">
                        <thead>
                            <tr>
                                <th data-field="state" data-checkbox="true"></th>
                                <th data-field="title">广告标题</th>
                                <th data-field="type">类型</th>
                                <th data-field="file">文件预览</th>

                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="file_upload">
                    <label>选择一个文件进行投放:</label>
                    <button class="mes_submit file_tr">投放</button>
                    <span class="warn_info"></span>
                </div>
            </fieldset>
        </div>
    </div>



    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/utf8-php/ueditor.config.js"></script>
    <script src="js/utf8-php/ueditor.all.min.js"></script>
    <script src="js/base.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
    <script>
        const fm = new FormData()
        console.log(baseUrl);
        $(".message_file").change(function (e) {
            const name = e.target.files[0].name
            const file = e.target.files[0]
            $(".mes_file_name").html(name)
            fm.append("file", file);
        })
        $(".file_up").click(function () {
            const title = $(".message_input").val()
            const type = $(".message_select").val()
            fm.append("title", title);
            console.log(fm);

            if (type === '0') {
                console.log(type);
                $.ajax({
                    url: `${baseUrl}/upload/uploadImage`,
                    type: 'POST',
                    data: fm,
                    cache: false,
                    processData: false,
                    contentType: false,
                    beforeSend: function (request) {
                        request.setRequestHeader("token", localStorage.getItem("token"));
                    },
                    success: function (res) {
                        console.log(res);
                        window.location.reload()
                    },
                })

            } else if (type === '1') {

                $.ajax({
                    url: `${baseUrl}/upload/uploadVideo`,
                    type: 'POST',
                    data: fm,
                    cache: false,
                    processData: false,
                    contentType: false,
                    beforeSend: function (request) {
                        request.setRequestHeader("token", localStorage.getItem("token"));
                    },
                    success: function (res) {
                        console.log(res);
                        window.location.reload()
                    },
                })
            }

        })
        const $table = $('#file_table')

        $(function () {

            $.ajax({
                url: `${baseUrl}/upload/getAllVideoAndImage`,
                type: 'POST',
                data: fm,
                cache: false,
                processData: false,
                contentType: false,
                beforeSend: function (request) {
                    request.setRequestHeader("token", localStorage.getItem("token"));
                },
                success: function (res) {
                    console.log(res);
                    const { imageList, videoList } = res.data;
                    const data = [...imageList, ...videoList]
                    const afterData = data.map((item) => {
                        console.log(item);
                        return {
                            id: item['imageId'] ? item.imageId : item.videoId,
                            title: item.title,
                            type: item['imageId'] ? '图片' : '视频',
                            file: item['imageId'] ? '<a href="' + item.imageUrl + '" target="_blank">' + "点击查看" + '</a>'
                                : '<a href="' + item.videoUrl + '" target="_blank">' + "点击查看" + '</a>',
                            url: item['imageId'] ? item.imageUrl : item.videoUrl
                        }
                    })
                    $table.bootstrapTable({ data: afterData })
                },
            })


        })
        $(".file_tr").click(function () {
            const data = $table.bootstrapTable('getData');
            const fileArr = data.filter((item) =>
                item.state === true
            )
            if (fileArr.length !== 1) {
                $(".warn_info").html("请选择一个文件");
            } else {
                $(".warn_info").html("")
                console.log(fileArr[0]);
                const filetype = {
                    id: fileArr[0].id,
                    type: fileArr[0].type === "视频" ? 0 : 1
                }
                console.log(filetype);
                if (filetype.type === 0) {
                    $(".image").addClass('none')
                    $(".video").removeClass('none')
                    $(".video").get(0).setAttribute("src", fileArr[0].url)
                }
                else {
                    if ($(".video").get(0).pause) {
                        $(".video").get(0).pause();
                    }
                    $(".video").addClass('none')
                    $(".image").removeClass('none')
                    $(".image").get(0).setAttribute("src", fileArr[0].url)
                }
                $.ajax({
                    type: "POST",
                    url: `${baseUrl}/SSEtest/putVideoAndImage`,
                    dataType: "json",
                    contentType: "application/json",
                    beforeSend: function (request) {
                        request.setRequestHeader("token", localStorage.getItem("token"));
                    },
                    data: JSON.stringify(filetype),
                    success: function (res) {

                    }

                })

            }
        })
    </script>


</body>

</html>